<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <title>updateUser</title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/layui/css/layui.css}"/>
</head>
<body>
    <a></a>
    <script th:src="@{/static/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/static/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/static/mylayer.js}" type="text/javascript" charset="utf-8"></script>

    <form class="layui-form layui-form-pane" lay-filter="formFilter" action="">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">用户姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" autocomplete="off" placeholder="请输入姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户密码</label>
            <div class="layui-input-block">
                <input type="text" name="password" autocomplete="off" placeholder="请输入密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户年龄</label>
            <div class="layui-input-block">
                <input type="text" name="age" autocomplete="off" placeholder="请输入年龄" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">用户性别</label>
            <div class="layui-input-block">
                <select id="genderId" name="gender">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属科室</label>
            <div class="layui-input-block">
                <select id="departmentId" name="departmentId">
                    <option value="">请选择科室</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户权限</label>
            <div class="layui-input-block">
                <select id="roleId" name="role">
                    <option value="1">管理员</option>
                    <option value="2">医生</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">用户头像</label>
            <div class="layui-input-block">
                <div class="layui-upload-list">
                    <input type="hidden" name="image" id="imageID">
                    <img class="layui-upload-img" id="ID-upload-demo-img" width="150px" height="150px">
                    <div id="ID-upload-demo-text"></div>
                </div>
                <button type="button" class="layui-btn" id="uploadID">
                    <i class="layui-icon layui-icon-upload">头像上传</i>
                </button>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="submitDemo">修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <script>
        layui.use(['form','upload'], function () {
            var form = layui.form;
            var upload = layui.upload;
            var queryString = window.location.search;
            var urlParams = new URLSearchParams(queryString);
            var id = urlParams.get("id");

            console.log("id: " + id);

            $.post(
                "/user/selectMap",
                {"id": id},
                function (result) {
                    console.log(result);
                    if(result.code == 0) {
                        $(result.data.department).each(function () {
                            $('#departmentId').append('<option value="' + this.id + '">' + this.name + '</option>');
                        })
                        form.render("select");

                        form.val("formFilter", result.data.user);
                    }
                },
                'json'
            );

            // 单图片上传
            var uploadInst = upload.render({
                elem: '#uploadID',
                url: '/upload', // 实际使用时改成您自己的上传接口即可。
                before: function(obj){
                    // 预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                    });
                },
                done: function(result){
                    // 若上传失败
                    if(result.code == 0){
                        console.log(result);
                        $('#imageID').val(result.data)
                    } else {
                        mylayer.errorMsg('上传失败');
                    }
                    $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
                },
                error: function(){
                    // 演示失败状态，并实现重传
                    var demoText = $('#ID-upload-demo-text');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                },
            });

            //监听提交
            form.on('submit(submitDemo)', function(data){
                // layer.alert(JSON.stringify(data.field), {
                //     title: '最终的提交信息'
                // })
                console.log(data.field);
                $.post(
                    '/user/update',
                    data.field,
                    function (result) {
                        console.log(result);
                        if(result.code == 0) {
                            mylayer.okMsg(result.msg);
                            setInterval(function () {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                                window.parent.location.reload();
                            }, 2000);
                        }
                    },
                    'json'
                )
                return false;
            });

        })

        var kindEditorParams = {
            afterBlur: function () {
                this.sync();
            }
        };
        var editor = KindEditor.create('#contentId',kindEditorParams);
    </script>
</body>
</html>
